<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>若依介绍</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" >
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/date.css}" rel="stylesheet"/>
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="layui-container" style="padding: 15px;">
        <div class="layui-row">
            <div class="layui-col-md12">
                <blockquote class="layui-elem-quote">考勤打卡</blockquote>
                <div class="layui-inline" id="test-n2" ></div>
            </div>
        </div>
    </div>

</div>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script>


    layui.use(['layer', 'form','jquery','laydate'], function() {
        var layer = layui.layer,
            $ = layui.jquery,
            laydate = layui.laydate,
            form = layui.form;




        //定义json
        var  data={};

        var new_date = new Date();
        loding_date(new_date ,data);


        //日历插件调用方法
        function loding_date(date_value,data){

            laydate.render({
                elem: '#test-n2'
                ,type: 'date'
                ,theme: 'grid'
                ,max: '2099-06-16 23:59:59'
                ,position: 'static'
                ,range: false
                ,value:date_value
                ,calendar: true
                ,btns:false
                ,done: function(value, date, endDate){
                    console.log(value); //得到日期生成的值，如：2017-08-18
                    console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                    console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
                    //layer.msg(value)

                    //调用弹出层方法
                    date_chose(value,data);

                }
                , mark:data//重要json！

            });
        }



        //获取隐藏的弹出层内容
        var date_choebox = $('.date_box').html();

        //发送ajax打卡
        function date_chose(obj_date,data){
            // var index = layer.open({
            //     type: 1,
            //     skin: 'layui-layer-rim', //加上边框
            //     title:'添加记录',
            //     area: ['400px', 'auto'], //宽高
            //     btn:['确定','撤销','取消'],
            //     content: '<div class="text_box">'+
            //     '<form class="layui-form" action="">'+
            //     '<div class="layui-form-item layui-form-text">'+
            //     ' <textarea id="text_book" placeholder="请输入内容"  class="layui-textarea"></textarea>'+
            //     '</div>'+
            //     '</form>'+
            //     '</div>'
            //     ,success:function(){
            //         $('#text_book').val(data[obj_date])
            //     }
            //     ,yes:function (){
            //         //调用添加/编辑标注方法
            //             chose_moban(obj_date,data);
            //             layer.close(index);
            //
            //     },btn2:function (){
            //         chexiao(obj_date,data);
            //     }
            // });
            var  json={
                'attendDate':obj_date
            }
            $.ajax({
                url: "/attend",
                type: "post",
                data: json,
                dataType:'json',
                success: function(data) {
                    if (data.code==200){
                        layer.msg(data.message, {icon: 1});
                    }else {
                        layer.msg(data.message, {icon: 2});
                    }
                }
            });
        }





        //定义添加/编辑标注方法
        function chose_moban(obj_date,markJson){
            //获取弹出层val
            var chose_moban_val = $('#text_book').val();

            $('#test-n2').html('');//重要！由于插件是嵌套指定容器，再次调用前需要清空原日历控件
            //添加属性
            markJson[obj_date] = chose_moban_val;
            console.log(JSON.stringify(markJson));
            //再次调用日历控件，
            loding_date(obj_date,markJson);//重要！，再标注一个日期后会刷新当前日期变为初始值，所以必须调用当前选定日期。
        }


        //撤销选择
        function chexiao(obj_date,markJson){
            //删除指定日期标注
            delete markJson[obj_date];
            console.log(JSON.stringify(markJson));
            //原理同添加一致
            $('#test-n2').html('');
            loding_date(obj_date,markJson);

        }


    });</script>
</body>
</html>
